import { loadImage } from "@/utils";
import { getScreenSize } from "@/utils";
import { useUIStore } from "@/store/uiStore";
import { useUserStore } from "@/store/userStore";
import Curosrs from "@/assets/images/tiles/cursors.zh-CN.png";

/**
 * 能量条UI
 */
export class EnergyBarUI {
  private uiStore = useUIStore();
  private userStore = useUserStore();

  constructor() {
    const { width: screenWidth, height: screenHeight } = getScreenSize();

    loadImage(Curosrs).then((image) => {
      this.uiStore.registerElement("energyBar", {
        visible: true,
        zIndex: 10,
        resources: image,
        type: "energyBarBg",
        sourceRect: {
          x: 256,
          y: 408,
          width: 12,
          height: 56,
        },
        position: { x: screenWidth - 40, y: screenHeight - 200 },
        size: { width: 30, height: 140 },
      });

      this.uiStore.registerElement("energyBarFill", {
        visible: true,
        zIndex: 11,
        type: "energyBarFill",
        position: { x: screenWidth - 40, y: screenHeight - 200 },
        size: { width: 30, height: 140 },
        fillPercentage: 0,
      });
    });
  }

  // 更新能量值
  update() {
    if (this.userStore.baseStats.energy !== undefined) {
      const energy = this.userStore.baseStats.energy;
      const maxEnergy = 100;

      const fillPercentage = Math.max(0, Math.min(energy / maxEnergy, 1));

      if (this.uiStore.uiElements["energyBarFill"]) {
        this.uiStore.updateElement("energyBarFill", {
          fillPercentage: fillPercentage,
        });
      }
    }
  }

  // 渲染能量条
  render(ctx: CanvasRenderingContext2D, uiCanvasRef: HTMLCanvasElement) {
    if (!ctx) return;
    if (!uiCanvasRef) return;

    const uiElements = this.uiStore.uiElements;
    const sortedElements = Object.entries(uiElements)
      .map(([key, el]) => ({ key, el }))
      .sort((a, b) => (a.el?.zIndex || 0) - (b.el?.zIndex || 0));

    for (const { key, el } of sortedElements) {
      if (!el || !el.visible) continue;

      if (
        el.type === "energyBarBg" &&
        el.resources &&
        el.sourceRect &&
        el.position &&
        el.size
      ) {
        const destX = Math.floor(el.position.x);
        const destY = Math.floor(el.position.y);
        const destWidth = Math.floor(el.size.width);
        const destHeight = Math.floor(el.size.height);

        ctx.drawImage(
          el.resources,
          el.sourceRect.x,
          el.sourceRect.y,
          el.sourceRect.width,
          el.sourceRect.height,
          destX,
          destY,
          destWidth,
          destHeight
        );
      } else if (el.type === "energyBarFill" && el.position && el.size) {
        const fillPercentage = el.fillPercentage || 0;
        const destX = Math.floor(el.position.x + 7); // 内边距
        const destWidth = Math.floor(el.size.width - 15); // 左右边距
        const fullHeight = Math.floor(el.size.height - 36); // 上下边距
        const fillHeight = Math.floor(fullHeight * fillPercentage); // 填充高度
        const destY = Math.floor(
          el.position.y + 32 + (fullHeight - fillHeight)
        ); // 从底部开始填充

        ctx.save();
        ctx.fillStyle = "#3dff00";
        ctx.fillRect(destX, destY, destWidth, fillHeight);
        ctx.restore();
      }
    }
  }
}
